.main-integral-exchange {
    width: 100%;
    height: auto;
    background-color: rgb(255, 255, 255);
    margin-top: 0.24390243902439024rem;
    padding: 0.36585365853658536rem;
    h4 {
        font-size: 0.2926829268292683rem;
        margin-left: 0.7804878048780488rem;
   }
    .main0integral-300-500-1000 {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        flex-wrap:wrap ;
        margin-bottom: 1.3414634146341464rem;
        .main-integral-300-goods {
            margin-top: 0.34146341463414637rem;
            width: 45%;
            height: 4.2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 0.24390243902439024rem;
            line-height: 0.43902439024390244rem;
            margin-left: 0.24390243902439024rem;
            margin-bottom: 0.7073170731707317rem;
            background: linear-gradient(-191deg, rgb(202, 241, 246), rgb(76, 170, 208));
            position: relative;
            .main-goods-integral-bottom-h3{
                position: relative;
                bottom: -0.5170731707317073rem;
                left: -1.3561rem;
                color: #000;
                span{
                    color: rgb(25, 140, 194);
                    margin-left: 0.36585365853658536rem;
               }
           }
            .main-goods-integral-images{
                border-style: none;
                width: 2.926829268292683rem;
                height: 2.6341463414634148rem;
                border-radius: 0.4878048780487805rem;
                margin-top: 0.1951219512195122rem;
                background: #fff;
                img{
                    width: 100%;
                    height: 107%;
                    border-radius: 0.4878048780487805rem;
               }
           }
            h3{
                color: #fff;
                font-size: 0.24390243902439024rem;
                width: 2.1951219512195124rem;
                height: 0.34146341463414637rem;
                line-height: 1.1219512195121952rem;
                text-align: center;
           }
            .main-integral-top-goods {
                display: flex;
                flex-direction: column;
                h4 {
                    font-size: 0.43902439024390244rem;
                    color: rgb(25, 144, 199);
                    font-weight: 700;
                    margin-left: 0rem !important;
                    line-height: 0.6829268292682927rem;
                    width: 2.4878048780487805rem;
                    height: 0.5365853658536586rem;
                    overflow: hidden;
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 0.17073170731707318rem;
               }
                h5 {
                    font-size: 0.34146341463414637rem;
                    color: rgb(25, 144, 199);
                    font-weight: 700;
                    margin-left: 0rem !important;
                    line-height: 0.6829268292682927rem;
                    text-align: center;
               }
           }
            .main-integral-bottom {
                position: absolute;
                width: 2.0390243902439024rem;
                height: 0.43902439024390244rem;
                align-items: center;
                background-color: rgb(25, 145, 198);
                border-radius: 0.07317073170731707rem;
                color: #fff;
                margin-top: 0.1951219512195122rem;
                line-height: 0.43902439024390244rem;
                text-align: center;
                bottom: -0.5609756097560976rem;
                left: 1.9268292682926829rem;
           }
       }
        .main-integral-300-1000 {
            margin-top: 0.34146341463414637rem;
            width: 45%;
            height: 4.2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 0.24390243902439024rem;
            line-height: 0.43902439024390244rem;
            margin-left: 0.24390243902439024rem;
            margin-bottom: 0.7073170731707317rem;
            background: linear-gradient(-191deg, rgb(202, 241, 246), rgb(76, 170, 208));
            position: relative;
            .main-goods-integral-bottom-h3{
                position: relative;
                bottom: -0.5170731707317073rem;
                left: -1.3561rem;
                color: #000;
                span{
                    color: rgb(25, 140, 194);
                    margin-left: 0.36585365853658536rem;
               }
           }
            .main-goods-integral-images{
                border-style: none;
                width: 2.926829268292683rem;
                height: 2.6341463414634148rem;
                border-radius: 0.4878048780487805rem;
                margin-top: 0.1951219512195122rem;
                img{
                    width: 73%;
                    height: 107%;
                    margin-left: 0.34146341463414637rem;
               }
           }
            h3{
                color: #fff;
                font-size: 0.24390243902439024rem;
                width: 2.1951219512195124rem;
                height: 0.34146341463414637rem;
                line-height: 1.1219512195121952rem;
                text-align: center;
           }
            .main-integral-top-goods {
                display: flex;
                flex-direction: column;
                h4 {
                    font-size: 0.43902439024390244rem;
                    color: rgb(25, 144, 199);
                    font-weight: 700;
                    margin-left: 0rem !important;
                    line-height: 0.6829268292682927rem;
                    width: 2.4878048780487805rem;
                    height: 0.5365853658536586rem;
                    overflow: hidden;
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 0.17073170731707318rem;
               }
                h5 {
                    font-size: 0.34146341463414637rem;
                    color: rgb(25, 144, 199);
                    font-weight: 700;
                    margin-left: 0rem !important;
                    line-height: 0.6829268292682927rem;
                    text-align: center;
               }
           }
            .main-integral-bottom {
                width: 2.4390243902439024rem;
                height: 0.43902439024390244rem;
                align-items: center;
                background-color: rgb(25, 145, 198);
                border-radius: 0.07317073170731707rem;
                color: #fff;
                margin-top: 0.1951219512195122rem;
                line-height: 0.43902439024390244rem;
                text-align: center;
           }
            .top1{
                position: absolute;
                top: 1.024390243902439rem;
                color: #198dc0;
                font-size: 0.24390243902439024rem;
                flex-wrap: wrap;
                display: flex;
                left: 1.3731707317073171rem;
                width: 38%;
                font-size: 0.34146341463414637rem;
                line-height: 0.5121951219512195rem;
           }
            .top2{
                position: absolute;
                top: 2.8560975609756095rem;
                left: 0.7853658536585366rem;
                color: #fff;
           }
       }
        .main-integral-500 {
            margin-top: 0.24390243902439024rem;
            width: 45%;
            height: 2.4390243902439024rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 0.24390243902439024rem;
            border: 0.04878048780487805rem solid rgb(27, 144, 198);
            line-height: 0.43902439024390244rem;
            margin-left: 0.4878048780487805rem;
            .main-integral-top {
                display: flex;
                flex-direction: column;
           }
            .main-integral-bottom {
                width: 2.4390243902439024rem;
                height: 0.43902439024390244rem;
                align-items: center;
                background-color: rgb(25, 145, 198);
                border-radius: 0.07317073170731707rem;
                color: #fff;
                margin-top: 0.1951219512195122rem;
                line-height: 0.43902439024390244rem;
                text-align: center;
           }
       }
        .main-integral-1000 {
            margin-top: 0.36585365853658536rem;
            width: 45%;
            height: 2.4390243902439024rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 0.24390243902439024rem;
            border: 0.04878048780487805rem solid rgb(27, 144, 198);
            line-height: 0.43902439024390244rem;
            margin-left: 0.24390243902439024rem;
            .main-integral-top-goodsIntegral {
                display: flex;
                flex-direction: column;
                h4 {
                    font-size: 0.43902439024390244rem;
                    color: rgb(25, 144, 199);
                    font-weight: 700;
                    margin-left: 0rem !important;
                    line-height: 0.6829268292682927rem;
                    width: 3.1707317073170733rem;
                    height: 0.5365853658536586rem;
                    overflow: hidden;
                    text-align: center;
               }
                h5 {
                    font-size: 0.34146341463414637rem;
                    color: rgb(25, 144, 199);
                    font-weight: 700;
                    margin-left: 0rem !important;
                    line-height: 0.6829268292682927rem;
                    text-align: center;
               }
           }
            .main-integral-bottom {
                width: 2.4390243902439024rem;
                height: 0.43902439024390244rem;
                align-items: center;
                background-color: rgb(25, 145, 198);
                border-radius: 0.07317073170731707rem;
                color: #fff;
                margin-top: 0.1951219512195122rem;
                line-height: 0.43902439024390244rem;
                text-align: center;
           }
       }
   }
    .goodsIntegralExchange{
        position: absolute;
        top: 4.878048780487805rem;
        z-index: 21.951219512195124rem;
        color: #fff;
   }
    .goodsIntegralDetail {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: -2.7560975609756095rem;
        width: 7.317073170731708rem;
        height: 9.75609756097561rem;
        background-color: #fff;
        box-shadow:0rem 0rem 0.24390243902439024rem skyblue;
        z-index: 1000;
        left: 1.2195121951219512rem;
        border-radius: 0.975609756097561rem;
        padding: 0.4878048780487805rem;
        .goodsTitle {
            width: 100%;
            align-items: center;
            text-align: center;
            line-height: 0.8292682926829268rem;
       }
        p {
            margin-top: 0.4878048780487805rem;
            margin-bottom: 0.24390243902439024rem;
            .goodsIntegralspan1 {
                font-size: 0.3902439024390244rem;
                font-weight: 800;
                margin-top: 0.4878048780487805rem;
           }
            .goodsIntegralspan2 {
                font-size: 0.43902439024390244rem;
                color: #da1313;
           }
       }
        .goodsDetailDesc {
            text-indent: 2em;
            line-height: 0.5365853658536586rem;
            height: 2.8536585365853657rem;
            margin-top: 0.24390243902439024rem;
       }
        h3{
            font-size: 0.5853658536585366rem;
            width: 0.7317073170731707rem;
            height: 0.7317073170731707rem;
            border-radius: 0.7317073170731707rem;
            border: 0.024390243902439025rem solid skyblue;
            text-align: center;
            line-height: 0.6097560975609756rem;
            align-items: center;
            margin-left: 44%;
       }
   }
}
